import React, { Component } from "react";
import { Button, Table, Modal, Input } from "antd";
import "./index.less";

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: record => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name
  })
};
export default class GoodsClass extends Component {
  state = { visible: false };
  columns = [
    {
      title: "分类名称",
      dataIndex: "name",
      render: text => <a>{text}</a>
    },
    {
      title: "该分类下产品数量",
      dataIndex: "age"
    },
    {
      title: "操作",
      align: "right",
      render: () => (
        <div className="editor" onClick={this.showModal}>
          编辑
        </div>
      )
    }
  ];
  data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park"
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park"
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park"
    },
    {
      key: "4",
      name: "Disabled User",
      age: 99,
      address: "Sidney No. 1 Lake Park"
    }
  ];
  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      <div className="basic-page goods-class">
        <Button type="primary" className="new-classificat">
          新建分类
        </Button>
        <Table
          rowSelection={rowSelection}
          columns={this.columns}
          dataSource={this.data}
        />
        <Button>删 除</Button>
        <Modal
          title="新建分类"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          style={{ top: 220 }}
        >
          <div>分类名称：</div>
          <Input />
        </Modal>
      </div>
    );
  }
}
